<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
    <div  class="btn">
        <img src="img/play.gif" alt="" class="on">
        <audio  src="img/1.mp3"></audio>
    </div>
    <script >
    $(".btn").click(function(){
        if($("img").attr("class")=="on"){
            $("img").attr("class","off");
            $("img").attr("src","img/pause.gif");

            //$("audio").play();  报错$(...).pause is not a function
            $("audio")[0].pause()
        }
        else{
            $("img").attr("class","on");
            $("img").attr("src","img/play.gif");
            $("audio")[0].play();
        }
    })
    </script>
</body>
</html>